<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定手机号</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="{{ url('/common/mobile-common/common.css') }}">	
<link rel="stylesheet" href="{{ url('mobile/css/member/bindTel.css') }}">	
<script src="{{ url('mobile/js/jquery-1.8.3.min.js') }}"></script>
<link rel="stylesheet" href="{{ url('/') }}/layer/skin/layer.css" />
<script src="{{ url('/') }}/layer/layer.js"></script>
<script src="{{ url('/common/mobile-common/hmt.js') }}"></script>
</head>
<body>
	<div class="abouts">
		<div class="wrap-cont clearfix">
				<!--绑定手机号-->
				<div class="wrap-cont wrap-cont2">
					<div class="bd-info">
						<p class="dp">
						<img src="{{ url('mobile/images/dp.png')}}">
						<span>为了您的账户安全请及时绑定手机</span>
					</p>
					</div>
					<div class="tel-info">
						<p class="gjhdq">
							<label>国家和地区</label>
							<a>
								<em>中国</em>
								<i><img src="{{ url('mobile/images/more-icon.png')}}"></i>
							</a>
						</p>
						<ul class="dqLi">
							<li>中国</li>
							<li>日本</li>
							<li>哈萨克斯坦</li>
							<li>美国</li>
						</ul>
						<p class="sjh">
							<span>86</span>
							<input type="text" name="telNum" id="mobile" value="手机号">
						</p>
						<p style="position: relative;" class="captcha">
							<input type="text" name="captcha" value="请输入图形验证码" id="captcha">
							<img style="position: absolute;top:7px;right: 0px;cursor: pointer;" src="{{ url('captcha/mews') }}" onclick="this.src='{{ url('captcha/mews') }}?r='+Math.random();" alt="">
						</p>
						<p class="yz">
							<input type="text" name="yzmin" value="请输入短信验证码" id="yzm">
							<button class="hqyzm btnn">获取验证码</button>
						</p>
						<a class="ljbd btnn">立即绑定</a>
					</div>
				</div>
				<!--end-->				
				
		</div>
	</div>
</body>
<script>
	$(function(){
		var load;
		$("#mobile").focus(function(){
			if($(this).val()=='手机号'){
				$(this).val('');
			}
			
		});
		$("#yzm").focus(function(){
			if($(this).val()=='请输入短信验证码'){
				$(this).val('');
			}
		});
		$("#captcha").focus(function(){
			if($(this).val()=='请输入图形验证码'){
				$(this).val('');
			}
		});
		//按钮变化
		$("#yzm").bind("input propertychange",function(){
			var yzmTxt=$("#yzm").val();
			if($("#yzm").val().length==6 && !isNaN($("#yzm").val())){
				$(".tel-info .ljbd").css("background","#f63b43");
			}
			else if($("#yzm").val().length>6){
				yzmTxt=yzmTxt.substring(0,6);
				$("#yzm").val(yzmTxt);
			}
		});
		//地区选择
		$(".gjhdq a").on("touchstart",function(){
			$(".dqLi").toggle();
			var stasDq=$(".dqLi").css("display");
			if(stasDq=='block'){
				$(".gjhdq a i img").addClass("imgg2");
				$(".gjhdq a i").find("img").attr("src","{{ url('mobile/images/do-icon2.png')}}");
			}
			else{
				$(".gjhdq a i img").removeClass("imgg2");
				$(".gjhdq a i").find("img").attr("src","{{ url('mobile/images/more-icon.png')}}");
			}
		});
		$(".dqLi li").on("touchstart",function(){
			var dqTxt=$(this).text();
			$(".gjhdq a i img").removeClass("imgg2");
			$(".gjhdq a em").text(dqTxt);
			$(".gjhdq a i").find("img").attr("src","{{ url('mobile/images/more-icon.png')}}");
			$(".dqLi").hide();
		});
		//提示信息的显示
		$("#mobile").blur(function(){
			if($(this).val().length==0){
				$(this).val('手机号');
			}
		});
		$("#yzm").blur(function(){
			if($(this).val().length==0){
				$(this).val('请输入短信验证码');
			}
		});
		$("#captcha").blur(function(){
			if($(this).val().length==0){
				$(this).val('请输入图形验证码');
			}
		});
		//获取验证码
		$(".hqyzm").click(function(){
			var telNum=$("#mobile").val();
			var yzNum=$("#yzm").val();
			var myreg = /^1[34578]\d{9}$/;
			var captcha = $('#captcha').val();

			if(telNum.length==0 || telNum=="手机号"){
				alert("手机号码不能为空！");
				$("#mobile").focus();
				$('#mobile').val('');
				return false;
			}
			else if(!telNum.match(myreg)){
				alert("请输入正确的手机号码！");
				$("#mobile").focus();
				$('#mobile').val(telNum);
				return false;
			}
			else if(captcha.length == 0 || captcha == '请输入图形验证码'){
				alert("请输入图形验证码！");
				$("#captcha").focus();
				return false;
			}
			else {
				$.post("{{ url('api/smsWap') }}",{phone:telNum,'captcha':captcha},function(data){
					if(data.success){
						layer.alert(data.msg);
						settim();
					}else{
						layer.alert(data.msg);
					}
				});
			}
		});
		//验证
		$(".ljbd").on("touchstart",function(){
			var telNum=$("#mobile").val();
			var yzmNum=$("#yzm").val();
			var myreg = /^1[34578]\d{9}$/;
			if(telNum.length==0 || telNum=="手机号"){
				alert("手机号码不能为空！");
				$("#mobile").focus();
				$("#mobile").val('');
			}
			else if(!telNum.match(myreg)){
				alert("请输入正确的手机号码！");
				$("#mobile").focus();
				$("#mobile").val(telNum);
			}
			else if(yzmNum.length==0 || yzmNum=="请输入短信验证码"){
				alert("验证码不能为空");
				$("#yzm").focus();
				$("#yzm").val(yzmNum);
			} else {
				$.ajax({
					type: "POST",
					url:"{{ url('wap/member/bindTel') }}",
					data:{phone:telNum,code:yzmNum},
					beforeSend:function(){
						load = layer.load(1, {
							shade: [0.1,'#fff'] //0.1透明度的白色背景
						});
					},
					success: function(data){
						layer.alert(data.msg,function(){
							layer.close(load);
							window.location.href="{{url('wap')}}";
						});
					},
					error:function(data){
						layer.alert(data.msg);
					}
				});
			}
		});
		 var wait = 60;
         var isSend = false;
         function settim() {
         if (wait == 0) {
            $(".hqyzm").text("重新获取验证码");
            wait = 60;
            $(".hqyzm").css("background","#f63b43");
            $(".hqyzm").removeAttr("disabled");
            return false;
          } else {
          	
            $(".hqyzm").text("" + wait + "s");
            $(".hqyzm").attr("onclick", "");
            $(".hqyzm").css("background","#cccccc");
            $(".hqyzm").attr({"disabled":"disabled"});
            wait--;
            //编辑器
            setTimeout(function () {
                settim();
            }, 1000)
        }
    };
		
	})
</script>
</html>
